<template>
  <div class="app-container">


    <div class="filter-container">
      <el-select v-model="listQuery.isFinish" class="filter-item" clearable placeholder="是否结束">

        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <el-button
        v-permission="['GET /admin/risk/user/human/source/list']"
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="handleFilter"
      >查找
      </el-button>

      <el-button
        v-permission="['GET /admin/risk/user/human/source/endAll']"
        class="filter-item"
        type="danger"
        icon="el-icon-edit"
        @click="endUseAll"
      >结束所有资源
      </el-button>


    </div>

    <!-- 查询结果 -->
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="正在查询中..."
      border
      fit
      highlight-current-row
    >
      <el-table-column
        width="140"
        align="center"
        label="ID"
        prop="id"
        sortable
      />

      <el-table-column align="center" width="160" label="用户id" prop="userId"/>
      <el-table-column align="center" label="资源id" prop="sourceId"/>

      <el-table-column align="center" label="队列id" prop="queueId"/>
      <el-table-column align="center" label="开始时间" width="200" prop="startTime"/>

      <el-table-column align="center" label="是否结束" prop="isFinish" width="100">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.isFinish == 0" type="danger">否</el-tag>
          <el-tag v-else>是</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="创建日期" width="200" prop="createTime"/>

      <el-table-column
        align="center"
        label="操作"
        class-name="small-padding fixed-width"
        width="140"
      >
        <template slot-scope="scope">

          <el-button
            v-permission="['POST /admin/risk/user/human/source/endUse']"
            type="danger"
            size="mini"
            v-if="!scope.row.isFinish"
            :loading="finishLoading"
            @click="finishUserHand(scope.row)"
          >强制结束
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />
  </div>
</template>

<style>
</style>

<script>
  import {
    sourceList,
    endUse,
    endUseAll
  } from '../../api/source'
  import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
  const options = [{
    value: 0,
    label: '否'
  }, {
    value: 1,
    label: '是'
  }]
  export default {
    name: 'Admin',
    components: { Pagination },
    data() {
      return {
        options,
        list: [],
        total: 0,
        listLoading: true,
        finishLoading: false,
        listQuery: {
          isFinish: 0,
          page: 1,
          sort: '',
          order: '',
          limit: 20
        }
      }
    },
    computed: {},
    created() {
      this.getList()
    },
    methods: {
      getList() {
        this.listLoading = true
        sourceList(this.listQuery)
          .then((response) => {
            this.list = response.data.data.list
            this.total = response.data.data.total
            this.listLoading = false
          })
          .catch(() => {
            this.list = []
            this.total = 0
            this.listLoading = false
          })
      },
      handleFilter() {
        this.listQuery.page = 1
        this.getList()
      },

      finishUserHand(row) {
        let that = this
        this.$confirm('强制结束后用户将无法使用?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.finishLoading = true
          endUse({
            sign: row.sign,
            uuid: row.sourceId
          })
            .then((response) => {

              this.$notify.success({
                title: '成功',
                message: '结束成功'
              })
              that.handleFilter()

            })
            .catch((res) => {
              console.log(res.data)
              this.$notify.error({
                title: '失败',
                message: res.data.errmsg
              })
            }).finally(() => {
            this.finishLoading = false
          })
        })
      },
      /**
       * 结束所有
       */
      endUseAll() {

        let that = this
        if (that.list.length <= 0) {
          this.$notify.error({
            title: '失败',
            message: '没有资源占用可以结束'
          })
          return
        }
        let signStr = that.list[0].sign
        this.$confirm('强制结束后用户将无法使用?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.finishLoading = true
          endUseAll({
            sign: signStr
          })
            .then((response) => {

              this.$notify.success({
                title: '成功',
                message: '结束成功'
              })
              that.handleFilter()

            })
            .catch((res) => {
              console.log(res.data)
              this.$notify.error({
                title: '失败',
                message: res.data.errmsg
              })
            }).finally(() => {
            this.finishLoading = false
          })
        })
      }

    }

  }
</script>
